<!--
 * @Author: your name
 * @Date: 2021-12-23 17:54:54
 * @LastEditTime: 2021-12-24 10:50:14
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /notion/swiper.html
-->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Swiper demo</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="./swiper-bundle.min.css" />

    <!-- Demo styles -->
    <style>
      @font-face { font-family: 'Klee-One'; src: url('./fonts/Klee_One/KleeOne-Regular.ttf');}
      html,
      body {
        position: relative;
        height: 100%;
      }

      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

      .swiper-container {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        overflow: hidden;
      }

      .slide-inner {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-size: cover;
        background-position: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        color: #fff;
        font-family: 'Klee-One';
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <!-- Swiper -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div
            class="slide-inner"
            style="background-image: url(https://gitee.com/httishere/blog-image/raw/master/img/R-C.8a6393ab915193fe2f7b33ab79180024.jpeg)"
          >
          我有我要去的遠方，風雨兼程披星戴月
          </div>
        </div>
        <div class="swiper-slide">
          <div
            class="slide-inner"
            style="background-image: url(https://gitee.com/httishere/blog-image/raw/master/img/IMG_1618.jpg)"
          >
          所有苦難的盡頭，都是行雲流水般的此世光陰
          </div>
        </div>
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination swiper-pagination-white"></div>
      <!-- Navigation -->
      <!-- <div class="swiper-button-next swiper-button-white"></div>
      <div class="swiper-button-prev swiper-button-white"></div> -->
    </div>

    <!-- Swiper JS -->
    <script src="./swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var interleaveOffset = 0.5; //视差比值

      var swiperOptions = {
        // effect: "coverflow",
        centeredSlides: true,
        autoplay: {
          delay: 5000,
          disableOnInteraction: false,
        },
        loop: true,
        speed: 1000,
      };

      var swiper = new Swiper(".swiper-container", swiperOptions);
    </script>
  </body>
</html>
